<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IFE JavaScript Task 01</title>
    
        <style>
            body {
                font-size: 25px;
                font-family: 'Microsoft yahei';
            }
            
            input {
                border: 2px solid #a8a8a8;
                font-size: 25px;
                border-radius: 5px;
                outline: none;
            }
            
            .radio {
                display: inline-block;
                margin-left: 100px;
            }
            
            #form-container {
                width: 700px;
                margin: auto;
                padding: 100px;
            }
            
            #form-container span {
                width: auto;
                height: 50px;
                padding: 0 20px;
                margin-left: 25px;
                float: left;
            }
            
            #select-container {
                padding: 20px 0;
            }
            
            .hide{
                display: none;
            }
            
            .select {
                margin-left: 30px;
                width: 160px;
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            }
            
        </style>
    </head>
    
    <body>
    
        <div id="form-container">
            <div id="radio-select" onchange="radioChange()">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="inSchoolRadio" checked> 在校生
                    </label>
                </div>
                
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="outschoolRadio"> 非在校生
                    </label>
                </div>
            </div>

            <div id="select-container">
                <div class="inSchool">
                    <span>学校</span>
                    <select class="select" id="select1" onchange="selectDistrict()">
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="hz">杭州</option>
                    </select>
                    
                    <select class="select" id="select2">
                        <option value="pku">北京大学</option>
                        <option value="thu">清华大学</option>
                        <option value="bhu">北京航空航天大学</option>
                    </select>
                </div>

                <div class="outSchool hide">
                    <span>就业单位</span>
                    <input type="text" class="input">    
                </div>
            </div>    
        </div>
        
        <script src="task.js"></script>    
    </body>
</html>    